<template>
  <van-popup position="top" :style="{ height: '30%' }" round v-model="show" :close-on-click-overlay="false">
    <div class="container">
      <div class="main">
        <van-form>
          <van-field label="时间:">
            <template #input>
              <div style="width: 100%;">
                <SelectTimeList @checkTimeList="checkTimeList" :listDate="[search.begin_time, search.end_time]" />
              </div>
            </template>
          </van-field>

        </van-form>
      </div>
      <div class="footer">
        <van-button size="small" type="default" @click="show = false">取消</van-button>
        <van-button size="small" type="info" @click="confirm">确认</van-button>
      </div>
    </div>

  </van-popup>
</template>

<script>
import SelectTimeList from "@/components/selectTimeList.vue";
export default {
  components: {
    SelectTimeList,
  },
  data() {
    return {
      show: false,
      search: {
        begin_time: "",
        end_time: "",
        biz_id: ""
      },
    };
  },
  created() { },

  methods: {
    open() {
      this.show = true;
    },
    setData(data) {
      this.search = data;
    },
    checkTimeList(timeList) {
      this.search.begin_time = timeList[0];
      this.search.end_time = timeList[1];
    },
    confirm() {
      this.$emit("resetSearch", this.search);
      this.show = false;
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  // padding: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .main {
    flex: 1;
  }

  .footer {
    height: 50px;
    display: flex;
    padding: 0px 16px;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
